<template>
    <div class="a1" >
        <h1 v-for="item in username" :key="item.id">欢迎'{{item.nicjname}}'使用本后台管理</h1>
        <div class="a2"></div>
        <div class="b1">
        <div id="chart1"></div>
        <div id="chart2"></div>
        </div>
        <hr>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
import httpApi from '../http/index';
import myaxios from "../http/MyAxios";
import axios from "axios";
    export default {
        data(){
            return{
               
                categoryData:{
                    title:'不同类型商品数量分布',
                    cars:['创意家居', '健康美容', '时尚饰品', '数码配件', '食品'],
                    counts:[532, 458, 458, 246, 352],
                    },
                    usename1:'',
                    username:'',
            }
        },
        mounted(){
        this.initChart1();
        this.initChart2();
        this.use();
        },
        methods: {
            use(){
                httpApi.adminApi.admin().then((res)=>{
                    console.log('------',res)
                    this.username = res.data
                    console.log(this.username)
                    //this.usename1 = res.data
                   // console.log('****',usename1)
                })
            },
            initChart1(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('chart1'));
                // 绘制图表
                myChart.setOption({
                    
                title: {
                    text: this.categoryData.title
                },
                tooltip: {},
                xAxis: {
                    data: this.categoryData.cars
                },
                yAxis: {},
                series: [
                    {
                    name: '销量',
                    type: 'bar',
                    data:  this.categoryData.counts
                    }
                ]
                });
            },
            initChart2(){
                let data = []
                for(let i = 0; i<this.categoryData.cars.length;i++){
                    let cat = this.categoryData.cars[i]
                    let count = this.categoryData.counts[i]
                    data.push({name:cat,value:count})
                }
               var myChart = echarts.init(document.getElementById('chart2'));
               let option = {
                    title: {
                        text: this.categoryData.title,
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                        name: this.categoryData.cars,
                        type: 'pie',
                        radius: '50%',
                        data:data,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                        }
                    ]
                 };
               myChart.setOption(option)
            }
        },
    }
</script>

<style lang="scss" scoped>
.a1{
     //background-image: url("../../../img/banner-0419.jpg");
}
.a2{
    background-image: url("../../../img/logo.jpg");
    width: 300px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 100%;
}
h1{
    text-align: center;
    font-size: 2rem;
    color: #E60012;
}
.b1{
    display: flex;
    justify-content: space-between;
}
#chart1{
    width:35%;
    height:380px;
    //border: 1px solid #b93b3b;
}
#chart2{
    width:35%;
    height:500px;
    //border: 1px solid #b93b3b;
}
</style>